<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 一、认识路由
        路由：是从一个接口上收到数据包，根据数据包的目的地地址进行定向并转发到另一个接口的过程

        电脑mac地址：是一种在计算机网络中用于唯一标识适配器的物理地址，
        有12个十六进制数构成，通常以冒号或者连字符分开
        cmd => ipconfig/all =>物理地址
     -->

     <!-- 二、前端渲染和后端渲染 -->
     <!-- （一）后端渲染
        早期网页开发网页的构成：html+css+jsp(java server page) 或者 html+css+php
        网页全部在服务端渲染完成，再返回给浏览器，浏览器只是用于展示页面，
        并没有参与页面的渲染工作
     -->
     <!-- （二）前端渲染
        后端只需要提供前端所需要的数据，然后前端浏览器依靠获取的数据，
        利用js进行页面渲染，最终显示在用于的电脑上。页面的渲染工作是由浏览器来完成的。
    -->
    <!-- （三）后端渲染的优缺点 -->
    <!-- 
        1.优点
        =>前端耗时少，因为后端直接拼接完了html。不需要先下载js、css后才能看到页面，浏览器只需要直接渲染出来
        =>有利于搜索引擎优化，因为在后端有完整的html页面，所以爬虫更容易爬取信息
        =>无需占用客户端资源，因为解析模版的工作完全交给后端来进行，客户端只需要解析标准的html页面就可以了，
        这样对于客户端的资源占用更少，尤其是对于移动端，可以更省电
        =>后端可以生成静态文件，就是生成缓存片段，就可以减少数据库查询浪费的时间，
        对于数据变化不大的页面就非常高效

        2.缺点
        =>占用服务端资源，所有的html模版解析都是有服务端来做，如果请求较多，会对服务端造成一些访问压力。
        =>不利于前后端分离开发，开发效率低
     -->

     <!-- （四）前端渲染的优缺点
        1.优点
        =>前后端分离开发，前端专注于UI页面，后端专注于API开发，提高开发效率
        =>用户体验感更好（网站做成单页面应用）
        =>局部刷新，无需刷新整个页面
        =>懒加载
        =>富交互
        =>节约服务器成本

        2.缺点
        =>前端浏览器渲染页面的速度低于服务器渲染页面的速度
        =>不利于搜索引擎优化（SEO）
    
    -->
    <!-- （五）使用场景
        后端渲染：企业官网，主要功能是展示，没有太多复杂的交互，并且需要良好的SEO
        前端渲染：后台管理页面、交互丰富的网站、商城

        结合使用：首屏渲染使用后端渲染，保证渲染速度，提高用户体验，其他页面采用前端渲染
    
    -->

    <!-- 三、前端路由和后端路由的区别 -->
    <!-- （一）后端路由
        在浏览器中，输入url地址，浏览器就会向服务器发送请求，服务器根据这个url，返回不同的资源内容

        特点：
        前端每次跳转不同的url地址，都会重新访问服务器
        服务器根据前端的路由，返回不同的数据，或者html页面
     -->

     <!-- （二）前端路由 
        前端路由是指通过一定的技术手段，在跳转路由的时候不向服务器发送请求，而是在浏览器端进行处理，
        通过不同的url映射到页面不同的DOM元素，不同的url显示不同的页面内容
    -->

    <!-- 总结：后端路由是url地址映射到服务器上的某些资源 
              前端路由是url地址映射到浏览器上的某些资源 
    -->

    <!-- （三）什么时候用到前端路由？
        主要用于开发单页面应用

        单页面应用：整个项目只有一个页面，页面显示的内容被抽离成为一个个的组件，
        通过前端路由，让url地址的改变来映射到不同的组件，通过url的改变来决定组件的显示与否

        单页面应用的优缺点：
        优点：用户体验好
        缺点：不利于SEO

    -->

    <!-- （四）前端路由的实现技术
        1.基于hash实现的前端路由
        url: http://www.baidu.com/list/index.html#one

        hash的说明：
        hash就是完整的url地址#后面的内容
        web服务不会解析hash,因为hash只是浏览器的一个状态
        反而前端就可以在js里面通过location.hash来访问到具体的值
        前端在读取到hash值之后，就可以通过hash所代表的不同路径处理页面不同的显示逻辑

        hash的使用场景：<a href="#top">返回顶部</a>

        hash的特点：
        hash可以兼容低版本的浏览器
        hash的改变，不会向服务器发送请求，只是在浏览器的访问历史中增加记录，
        因此可以通过浏览器的前进、后退按钮来切换hash
    
        2.基于history实现的前端路由
        HTML5新增的API，来操作浏览器的历史，因为浏览器窗口会提供一个history对象，
        用来保存用户操作的历史。

        history说明：
        因为浏览器窗口提供了history来保持历史操作的url,
        因此使用前进后退按钮式，url地址会发送改变，但是不会像服务端发送请求。
        history对象中保存的历史记录都是访问过的路由，因此只需要通过一定的API方法，
        将一些url路由添加到history历史记录中就可以实现不发请求的路由跳转

        history API：
        history.pushState(state,title,url):在history中插入一条历史记录，可以前进后退
        history.replaceState(state,title,url):替换掉当前的history历史记录，不可以前进后退

    
    -->

    <!-- 三、vue-router的使用步骤：
        步骤一: 安装vue-router：npm install vue-router --save
        步骤二: 在模块化工程中使用它(因为是一个插件, 所以可以通过Vue.use()来安装路由功能)
           第一步：导入路由对象，并且调用 Vue.use(VueRouter)
           第二步：创建路由实例，并且传入路由映射配置
           第三步：在Vue实例中挂载创建的路由实例
        步骤三：使用vue-router的步骤:
           第一步: 创建路由组件
           第二步: 配置路由映射: 组件和路径映射关系
           第三步: 使用路由: 通过<router-link>和<router-view>

     -->

     <!-- <router-link>和<router-view>:是两个全局组件，可以在任意组件内使用 -->

    <!-- 四、动态路由
        https://gitee.com/xym9527/dl30-work 
        很多时候，当前页面的url地址需要根据用户的相关信息进行变化，所以需要使用动态路由
        1.router/index.js文件中，进行配置：path:"/Mine/:userId"
        2.在App.vue中传入动态路由：
        <router-link :to="'/mine/'+userId" tag="li" replace >我的</router-link>
        3.获取动态路由：$route.params

        注意：$router 和 $route的区别
        $router：表示实例化的VueRouter对象
        $route:表示的是当前被激活的组件对象
    
    -->

    <!-- 五、路由懒加载：
        把每一个组件打包成一个单独的js文件，当使用这个组件的时候，才加载对应的js文件 
        使用方法：在index.js(路由配置文件中)
    {
    path:"/Mine/:userId",
    component:()=> import("./../components/Mine")
  }
    
    -->

    <!-- 六、嵌套路由：在一个组价下面还有小组件，在路由上形成嵌套关系 
    {
    path:"/home",
    component:Home,
    children:[
      {
        path:"/",
        redirect:"one"//重定向
      },
      {
        path:"one",
        // 注意：以/开头的嵌套路径会被当成根路径
        component:one
      },
      {
        path:"two",
        component:two
      },
    ]
  },
    
    -->

    <!-- 七、组件之间传递参数 
        传递参数主要有两种类型: params和query
        params的类型:
          配置路由格式: /router/:id
          传递的方式: 在path后面跟上对应的值
          传递后形成的路径: /router/123, /router/abc
        query的类型:
          配置路由格式: /router, 也就是普通配置
          传递的方式: 对象中使用query的key作为传递方式
          传递后形成的路径: /router?id=123, /router?id=abc
        
        方法一：使用router-link组件传递参数
        1.传递数据：
    <router-link :to="{
      path:'/mine/'+userId,//params
      query:{
        name:'xyz',
        age:12,
        height:180
      }
    }" tag="li" replace >我的</router-link>

       2.获取数据
    <h3>用户ID：{{ $route.params.userId }}</h3>
    <h3>用户ID：{{ $route.query.name }}</h3>
    <h3>用户ID：{{ $route.query.age }}</h3>
    <h3>用户ID：{{ $route.query.height }}</h3>

    方法二：使用js代码传递参数
    1.传递数据：
    goMine() {
      // this.$router.push("/mine");
      let pm = this.$router.replace({
        path: "/mine/" + this.userId, //params
        query: {
          name: "xyz",
          age: 12,
          height: 180,
        },
      });
    }
    2.获取数据：
    <h3>用户ID：{{ $route.params.userId }}</h3>
    <h3>用户ID：{{ $route.query.name }}</h3>
    <h3>用户ID：{{ $route.query.age }}</h3>
    <h3>用户ID：{{ $route.query.height }}</h3>
    -->

    <!-- 八、导航守卫 
        导航守卫是Vue Router提供的一种功能，用于在路由导航过程中对路由进行控制和管理。
        导航守卫允许开发者在路由导航的不同阶段执行自定义的逻辑，
        比如在路由切换前进行身份验证、权限检查、取消路由等操作。

        Vue Router提供了3中导航守卫：
        1.全局前置守卫：通过router.beforeEach方法添加的，会在每个路由切换之前执行，
                      可以用于全局的身份验证、权限检查等。
        2.路由独享守卫：通过在路由配置中使用beforeEnter属性添加，只有在特定的路由切换前执行，
                      可以用于特点路由的身份验证、权限简称等。
        3.组件内守卫：通过Vue组件中定义beforeRouteEnter 和beforeRouteUpdate 和beforeRouteLeave等生命周期钩子函数来添加，
                     可以用于控制组件的路由导航逻辑

        导航守卫函数接受三个参数：
        to:即将进入的目标路由对象
        from:当前导航正要离开的路由对象
        next:是一个函数，必须执行这个函数之后，导航才会继续

        实现步骤：
        1. 给每一个组件的路由映射添加原数据属性
    {
    path:"/Mine/:userId",
    component:Mine,
    // 原数据
    meta:{
      title:"我的"
    }
  }
       2.使用router.beforeEach方法
let router=new VueRouter({
  // 配置路由和组件之间的映射关系
  routes,
  // mode:"history", //使用history的方式实现路由，默认是使用push方法，插入历史记录
  linkActiveClass:"active",//修改组件激活时的类名

})
    -->

    <!-- 九、keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。 -->
    <!-- 
    <keep-alive include="mine">
      <router-view></router-view>
    </keep-alive>
     -->


     


</body>
</html>